<template>
	<view class="container searchPage">
		<view class="search_top">
			<u-search placeholder="搜索商品"  :clearabled="true" shape="round" v-model="keyword"  @custom="search" @search="search"></u-search>
		</view>
		<scroll-view class="search_box" scroll-y>
			<view class="search_history">
				<!-- <view class="stit"> -->
					<!-- <view class="tl">安红豆额搜索</view> -->
					<!-- <view class="tr">清空</view> -->
				<!-- </view> -->
				<!-- <view class="slist">
					<button class="sbtn">0-100</button>
					<button class="sbtn">101-500</button>
					<button class="sbtn">501-1000</button>
					<button class="sbtn">1001-3000</button>
					<button class="sbtn">3000-10000</button>
					<button class="sbtn">10000以上</button>
				</view> -->
			</view>
	<!-- 		<view class="search_hot">
				<view class="stit">
					<view class="tl">搜索发现</view>
				</view>
				<view class="slist">
					<button class="sbtn">空气炸锅</button>
					<button class="sbtn">阿玛尼手表</button>
					<button class="sbtn">喂养秘方</button>
					<button class="sbtn">儿童常见</button>
					<button class="sbtn">睡眠不踏实</button>
					<button class="sbtn">二胎</button>
					<button class="sbtn">培养感情</button>
					<button class="sbtn">轻松带娃</button>
				</view>
			</view> -->
			
	<!-- 		<view class="stit1">热卖排行</view>
			<view class="hot_list">
				<view class="item" v-for="citem in courseList" :key="citem.id"  @click="showCourse(citem.id)" >
					<view class="item_left">
						<image :src="citem.cover" mode="aspectFill"></image>
					</view>
					<view class="item_right">
						<view class="tit">{{citem.title}}</view>
						<view class="price">
							<image src="/static/img/ic_red_bean.png" mode="widthFix"></image>
							<text>{{citem.price}}</text>
							</view>
					</view>
				</view>
			</view> -->
			<view class="goods_list">
				<view class="item" v-for="(item, index) in goodsList" :key="index" @click="goDetail(item)">
					<view class="it">
						<image :src="item.img|imgfilter" mode="aspectFill"></image>
					</view>
					<view class="ct">{{item.name}}</view>
					<view class="xj">
						<!-- <image src="../../static/img/ic_red_bean.png" mode="widthFix"></image> -->
						<text>￥{{item.price}}</text> 
						<!-- <text class="yj">86</text> -->
					</view>
					<!-- <view class="info">已领{{item.sales}}件</view> -->
				</view>
				<!-- 
				<view class="item">
					<view class="it">
						<image src="/static/img/product1.jpg" mode="aspectFill"></image>
					</view>
					<view class="ct">爱恩贝 内衣专享皂*5</view>
					<view class="xj"><image src="../../static/img/ic_red_bean.png" mode="widthFix"></image><text>40</text></view>
					<view class="info">已领150件</view>
				</view> -->
			</view>
			<u-loadmore :status="loadingType" />
		</scroll-view>
		
	</view>
</template>

<script>
	import {checkLogin} from '../../utils/auth'
	export default {
		data() {
			return {
				loadingType: '',
				sysHeight:0,
				keyword:'',
				page:1,
				goodsList:[
					// {
					// 	id: 0,
					// 	cover:'https://education.keweitianhui.com/public/static/images/kcimg1.jpg',
					// 	title: '儿童手工折纸专业课程【7天 60小时】',
					// 	price: 54.00,
					// 	buyNum: 5745
					// },
					],
				courseList:[
					{
						id: 0,
						cover:'https://education.keweitianhui.com/public/static/images/kcimg1.jpg',
						title: '儿童手工折纸专业课程【7天 60小时】',
						price: 54.00,
						buyNum: 5745
					},
					{
						id: 1,
						cover:'https://education.keweitianhui.com/public/static/images/kcimg2.jpg',
						title: '幼儿蒙氏教育课程 学前班，学前教育好帮手',
						price: 23.00,
						buyNum: 3648
					},
					{
						id: 2,
						cover:'https://education.keweitianhui.com/public/static/images/kcimg3.jpg',
						title: '4岁幼儿英语培训 2~6岁幼儿英语进阶',
						price: 42.00,
						buyNum: 589
					},
					{
						id: 3,
						cover:'https://education.keweitianhui.com/public/static/images/kcimg4.jpg',
						title: 'BIG FUN幼儿英语大集合，鼓励孩子英语成长',
						price: 54.00,
						buyNum: 9865
					},
				],
			};
		},
		async onLoad(){
			// 获取首页推荐
			this.sysHeight = uni.getSystemInfoSync().screenHeight;
			
		},
		onShow() {
		},
		filters: {	
			imgfilter(str) {
				return str.replace("https", "http")
			},
		},
		methods: {
			goDetail(item) {
				uni.navigateTo({
					url: '/pages/product/product?id=' + item.id
				})
			},
			async search(e){
				this.loadingType = 'loding';
				let data = {
					keyword : this.keyword,
					page : this.page
				};
				
				let results = (await this.$ajax.get('product/search.html',{data:data}));
				if(results.data.code == 1){
					if(results.data.data.length > 0){
						this.goodsList = results.data.data;
						
						// this.$api.msg('搜索成功');
						// this.paramlist.name = '';
						// for (let i=0;i<results.data.data.length;i++) {
						// 	results.data.data[i].img = 'http://app.tudouduanshiping.com/public/uploads/'+ results.data.data[i].img;
						// 	this.goodsList.push(results.data.data[i]);
						// };
						
					}else{
						this.$api.msg('没有查找到商品');
						this.loadingType = 'nomore';
					}
					
				}else{
					this.$api.msg(results.data.msg);
				}
				this.loadingType = 'more';
			},
			
			showCourse(id){
				uni.navigateTo({
					url: `/pages/course/course?id=`+ id
				})
			},
			/**
			 * 请求静态数据只是为了代码不那么乱
			 * 分次请求未作整合
			 */
			async loadMoreData2(){
				uni.showLoading({
				    title: '加载中'
				});
				let userid = uni.getStorageSync('userid');
				console.log("触发点击加载事件");
				const that=this
				this.nearpage = this.nearpage+1;
				this.loadingType = 'loading'
				let list = (await this.uniRequest.get('/api/home/near',{page:this.nearpage,userid:userid})).data.data
				for (let k in list) {
					console.log("循环");
					that.near.push(list[k]);
				}
				if(list.length < 1){
					this.loadingType = 'noMore'
				}else{
					this.loadingType = 'more'
				}
				uni.hideLoading();
				//数据查询完毕关闭下拉刷新
				uni.stopPullDownRefresh();
			},
			
		},
		
	}
</script>

<style lang="scss">
	page{
		height:100%;
		overflow:hidden;
	}
/deep/ .u-loadmore__content__text[data-v-055cbf89]{
	height: 20px;
	padding-top: 10px;
}
	.searchPage{
		height:100%;
		overflow:hidden;
		.uni-searchbar{
			background:#ccc !important;
		}
		.uni-searchbar__box{
			border:0 !important;
			justify-content: flex-start !important;
		}
		.uni-searchbar__text-placeholder{
			color:#999 !important;
		}
	}
	.search_top{
		height:auto;
		overflow:hidden;
		// background:$base-color;
		padding:0rpx 30rpx 40rpx 30rpx;
		position:relative;
	}
	.search_box{
		height:calc(100% - 20px);
		overflow:hidden;
		background:#fff;
		border-radius:30rpx;
		margin-top:-30rpx;
		position:relative;
		padding-bottom:100rpx;
		z-index:1;
	}
	.stit{
		padding:20rpx 30rpx;
		display:flex;
		justify-content:space-between;
		align-items:center;
		.tl{
			font-size:32rpx;
			color:#333;
		}
		.tr{
			font-size:28rpx;
			color:#999;
		}
	}
	.slist{
		height:auto;
		overflow:hidden;
		padding:20rpx 30rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content:flex-start;
		align-items:flex-start;
		.sbtn{
			height:60rpx;
			line-height:60rpx;
			background:#f2f2f2;
			color:#333;
			font-size:26rpx;
			margin:0 20rpx 20rpx 0;
			border-radius:100rpx;
			padding:0 20rpx;
			&::after{display:none;}
		}
	}
	.search_history{
		margin:30rpx 0;
	}
	.search_hot{
		margin:30rpx 0;
	}
	.stit1{
		padding:30rpx 30rpx 10rpx 30rpx;
		font-size:32rpx;
		color:#333;
		border-top:20rpx #f6f6f6 solid;
	}
	.hot_list{
		.item{
			height:auto;
			overflow:hidden;
			margin:0rpx 30rpx 0rpx 30rpx;
			display: flex;
			justify-content:flex-start;
			align-items: center;
			padding:30rpx 0;
			.item_left{
				width:160rpx;
				height:160rpx;
				overflow:hidden;
				border-radius:10rpx;
				margin-right:25rpx;
				image{
					width:100%;
					height:100%;
				}
			}
			.item_right{
				flex:1;
				text-align: left;
				.tit{
					height:110rpx;
					font-size:30rpx;
					color:#333;
				}
				.price{
					font-size:26rpx;
					color:#dd121b;
					image{
						width:30rpx;
						margin-right:10rpx;
					}
					text{
						font-size:30rpx;
						color:#f71501;
						font-weight:bold;
					}
				}
				.num{
					color:#ccc;
					float: right;
				}
			}
			&:last-child{
				border:0;
			}
		}
	}
	.goods_list{
		height:auto;
		overflow:hidden;
		padding:0rpx 15rpx 20rpx 15rpx;
		display:flex;
		flex-wrap: wrap;
		justify-content:space-between;
		align-items:center;
		.item{
			width:49%;
			height:575rpx;
			overflow:hidden;
			background:#fff;
			border-radius:15rpx;
			margin:10rpx 0 10rpx 0;
			.it{
				width:100%;
				height:355rpx;
				overflow:hidden;
				margin-bottom:20rpx;
				image{
					width:100%;
					height:100%;
				}
			}
			.ct{
				height:80rpx;
				overflow:hidden;
				text-align:left;
				font-size:30rpx;
				margin:0 20rpx;
				color:#333;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
			.xj{
				width:100%;
				display:flex;
				justify-content:flex-start;
				align-items:center;
				margin:15rpx 20rpx;
				image{
					width:30rpx;
					margin-right:10rpx;
				}
				text{
					font-size:30rpx;
					color:#f71501;
					font-weight:bold;
				}
				.yj{
					font-size:24rpx;
					color:#999;
					font-weight:normal;
					text-decoration:line-through;
					margin-left:20rpx;
				}
			}
			.info{
				font-size:24rpx;
				color:#999;
				margin:10rpx 20rpx;
			}
		}
	}	
	
</style>
